<!-- allow-create:可以创建并选中选项中不存在的条目 -->
<!-- filterable:可以利用搜索功能快速查找选项 -->
<template>
<div style="width:100%;height:200px">
    <el-select v-model="value"  allow-create filterable clearable placeholder="请选择" @blur="selectBlur"  style="width:200px">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
    </el-select>
</div>
    
</template>

<style scoped  lang="scss">
// 分页
::v-deep .el-pagination.is-background .el-pager li{
    background-color: #fff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: #911F23;
    color: #fff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: #911F23;
    
}
//分页数
::v-deep .el-select-dropdown__item.selected{
    color: #911F23 !important;
}
::v-deep .el-input__inner{
    color: #911F23;
}


::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
    color: #333;
}
::v-deep .el-divider--vertical {
    height: 15px;
}
::v-deep .el-radio {
  .el-radio__input {
    .el-radio__inner {
      border-radius: 2px;
    }
  }
  .el-radio__input.is-checked .el-radio__inner::after {
    content: '';
    width: 8px;
    height: 3px;
    border: 2px solid white;
    border-top: transparent;
    border-right: transparent;
    text-align: center;
    display: block;
    position: absolute;
    top: 2px;
    left: 1px;
    vertical-align: middle;
    transform: rotate(-45deg);
    border-radius: 0px;
    background: none;
  }
}
::v-deep .el-radio{
    line-height: 30px;
    display: block;
    .el-radio__label{
        font-size: 12px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        span{
            color: #999999;
            padding-left: 10px;
        }
    }
}
::v-deep .el-input--suffix .el-input__inner{
    width: 70px;
    height: 22px;
    margin: 0 6px;
}
/*右侧图标样式  \e790下箭头图标*/
::v-deep  .el-select .el-input .el-select__caret.el-input__icon::before {
  content: " \e790";  
  color: #333333;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
}
::v-deep .el-select .el-input .el-select__caret {
  transform: rotateZ(0deg);
}

    .s3{
        width: 1400px;
        margin: 24px auto 90px;
        display: flex;
        justify-content: space-between;
        .s11{
            width: 240px;
            .s11-1{
                width: 100%;
                // height: 376px;
                margin-bottom: 24px;
                .smn{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: calc(100% - 32px);
                    height: 46px;
                    background-color: #F2F2F2;
                    border-radius: 8px 8px 0px 0px;
                    padding: 0 16px;
                    font-size: 14px;
                    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                    font-weight: 400;
                    color: #333333;
                    cursor: pointer;
                }
                .smn1{
                    width: calc(100% - 32px);
                    // height: 306px;
                    padding: 18px 16px 12px;
                    background-color: #fff;
                    border-radius:  0px 0px 8px 8px;
                    // line-height: 45px;
                }
            }
            
        }
        .s12{
            width: 1140px;
            .cont{
                width: 100%;
                display: flex;
                justify-content: space-between;
                .cont-1{
                    display: flex;
                    font-size: 14px;
                    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                    font-weight: 400;
                    color: #333333;
                    span{
                        color: #911F23;
                    }
                }
                .cont-2{
                    display: flex;
                    font-size: 14px;
                    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                    font-weight: 400;
                    color: #666666;
                    span{
                        color: #911F23;
                        padding: 0 4px;
                    }
                    .shuliang{
                        padding-left: 24px;
                    }
                }
            }
            .cont1{
                width: calc(100% - 32px);
                height: 48px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 16px;
                background: #FFFFFF;
                border-radius: 8px 8px 8px 8px;
                margin-top: 16px;
                .cont1-1{
                    width: 40%;
                    display: flex;
                    .cont1-12{
                        font-size: 14px;
                        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                        font-weight: 400;
                        color: #333333;
                        padding-left: 12px;
                        span{
                            padding: 0 6px;
                            color: #911F23;
                        }
                    }
                    .cont1-13{
                        margin-left: 12px;
                        width: 44px;
                        height: 22px;
                        background: #911F23;
                        border-radius: 4px 4px 4px 4px;
                        opacity: 1;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 14px;
                        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                        font-weight: 400;
                        color: #FFFFFF;
                    }
                    .cont1-14{
                        margin-left: 12px;
                        width: 72px;
                        height: 20px;
                        border-radius: 4px 4px 4px 4px;
                        opacity: 1;
                        border: 1px solid #911F23;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 14px;
                        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                        font-weight: 400;
                        color: #911F23;
                    }
                }
                .cont1-2{
                    width: 20%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 14px;
                    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                    font-weight: 400;
                    color: #333333;
                }
                .cont1-3{
                    width: 40%;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                     font-size: 14px;
                    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                    font-weight: 400;
                    color: #333333;
                    img{
                        // padding-top: 8px;
                        height: 20px;
                        width: 20px;
                    }
                    span{
                        color: #911F23;
                    }
                   
                }
            }
            .cont2{
                width: calc(100% - 32px);
                padding: 16px;
                background: #FFFFFF;
                border-radius: 8px 8px 8px 8px;
                opacity: 1;
                margin-top: 12px;
                display: flex;
                cursor: pointer;
                .left{
                    width: 5%;
                }
                .righ{
                    width: 95%;
                    .mcs{
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        // align-items: center;
                        .mc{
                            height: 24px;
                            font-size: 16px;
                            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                            font-weight: 400;
                            color: #3D3D3D;
                        }
                        .mc1{
                            display: flex;
                            align-items: center;
                            font-size: 12px;
                            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                            font-weight: 400;
                            color: #333333;
                            img{
                                width: 16px;
                                height: 16px;
                            }
                        }
                    }
                    .fx{
                        margin-top: 16px;
                        font-size: 12px;
                        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                        font-weight: 400;
                        color: #666666;
                    }
                    .nr{
                        width: 100%;
                        margin-top: 16px;
                        font-size: 12px;
                        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                        font-weight: 400;
                        color: #666666;
                        line-height: 20px;
                    }
                }
            }
            .cont3{
                width: 1400px;
                margin-top: 16px;
                text-align: center;
                transform: translateX(-10%);
            }
        }
    }
  
</style>

<script>
//  import { getUserList,addUser  } from "@/api/api.js"; 
import Vue from 'vue';
import Viewer from 'v-viewer'

import 'viewerjs/dist/viewer.css'

export default {
  data(){
    return{
       value: '',
    options: [{
        value: '选项1',
        label: '黄金糕'
    }, {
        value: '选项2',
        label: '双皮奶'
    }, {
        value: '选项3',
        label: '蚵仔煎'
    }, {
        value: '选项4',
        label: '龙须面'
    }, {
        value: '选项5',
        label: '北京烤鸭'
    }]
    }
  },
  created(){
     
     
  },
  mounted(){
    // this.drawChart()
  },
  methods:{
    selectBlur(e) {
        console.log(e.target.value,'000')
        this.value = e.target.value;
    }
  },
  computed:{
　　
},
  components: {
      
  }
}
</script>
